<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>意向岗位管理</title>
		<meta name="description" content="这是一个 index 页面">
		<meta name="keywords" content="index">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="${ctx}/assets/i/favicon.png">
		<link rel="apple-touch-icon-precomposed" href="${ctx}/assets/i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<!-- 
		<link rel="stylesheet" href="${ctx}/assets/css/amazeui.min.css" />
		<script src="${ctx}/assets/js/echarts.min.js"></script>
		<script src="${ctx}/assets/js/jquery.min.js"></script>
		-->
		<script src="${ctx}/assets/js/echarts.min.js"></script>
		<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css" />
		<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
		<link rel="stylesheet" href="${ctx}/assets/css/app.css">
	</head>

	<body data-type="widgets">
		<script src="${ctx}/assets/js/theme.js"></script>
		<div class="am-g tpl-g">
			<!-- 内容区域 -->
			<div class="am-box">
			<c:choose>
		       <c:when test="${empty item}">
		            <a class="am-btn am-icon-pencil" href="${ctx}/wechat/favjob/add">岗位申请</a>
		       </c:when>
		       <c:otherwise>
		       <div class="row">
		       		<div class="am-fr am-u-sm-3 am-u-md-3 am-u-lg-3">
		       			<label >备选岗位:${item.thirdJob.name }</label>
		       		</div>
		       		<div class="am-fr am-u-sm-3 am-u-md-3 am-u-lg-3">
		       			<label>次选岗位:${item.secondJob.name }</label>
		       		</div>
		       		<div class="am-fr am-u-sm-3 am-u-md-3 am-u-lg-3">
		       			<label style="color:red;">首选岗位:${item.firstJob.name }</label>
		       		</div>
		       		<div class="am-fr am-u-sm-3 am-u-md-3 am-u-lg-3">
		       			 <a class="am-btn am-icon-trash" href="${ctx}/wechat/favjob/update?id=${item.id}">岗位更新</a>
		       		</div>
		       	</div>	
		       </c:otherwise>
			</c:choose>
			</div>
           
			<div class="row-content">
				<div class="row-content am-cf">
					<div class="row">
						<div class="am-fr am-u-sm-6 am-u-md-6 am-u-lg-6">
							<div id="clazzchart" style="height:420px;"></div>
						</div>
						<div class="am-fr am-u-sm-6 am-u-md-6 am-u-lg-6">
							<div id="deptchart" style="height:420px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 
		<script src="${ctx}/assets/js/amazeui.min.js"></script>
		 -->
		<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
	<script type="text/javascript">
		function clazzEcharts(){
			var myChart = echarts.init(document.getElementById('clazzchart'));
	        // 指定图表的配置项和数据
	        
	        myChart.setOption( {
	            title: {
	            		x:'center',
	                text: '岗位统计'
	            },
	            tooltip: {},
	            calculable: true,
	            xAxis: {
	                data: []
	            },
	            yAxis: {
	                type: 'value',
	                show: false
	            },
	            series: 
	            	[{
	                name: '岗位意向',
	                type: 'bar',
	                itemStyle: {
	                    normal: {
	                        color: function(params) {
	                            // build a color map as your need.
	                            var colorList = [
	                              '#B5C334','#FCCE10','#E87C25','#27727B',
	                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
	                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0','#C1232B'
	                            ];
	                            return colorList[params.dataIndex]
	                        },
	                        label: {
	                            show: true,
	                            position: 'top',
	                            formatter: '{b}\n{c}'
	                        }
	                    }
	                },
	                data: []
	            }]
	        });
	        $.ajax({
				url : "${ctx}/wechat/favjob/getdataecharts",
				type : "post",
				data :{
					clazz:"${loginUser.clazz}"
				},
				async : false,
				success : function(data) {
					// 填入数据
					var title = data.title + '岗位统计';
				    myChart.setOption({
				    	title: {
		                text: title
		           		 },
				        xAxis: {
				            data: data.category
				        },
				        series: [{
				            // 根据名字对应到相应的系列
				            name: '销量',
				            data: data.data
				        }]
				    });
				}
			});
	        // 使用刚指定的配置项和数据显示图表。
		}
		function deptEcharts(){
			var myChart = echarts.init(document.getElementById('deptchart'));
	        myChart.setOption( {
	            title: {
	            		x:'center',
	                	text: '岗位统计'
	            },
	            tooltip: {},
	            calculable: true,
	            xAxis: {
	                data: []
	            },
	            yAxis: {
	                type: 'value',
	                show: false
	            },
	            series: 
	            	[{
	                name: '岗位意向',
	                type: 'bar',
	                itemStyle: {
	                    normal: {
	                        color: function(params) {
	                            // build a color map as your need.
	                            var colorList = [
	                              '#B5C334','#FCCE10','#E87C25','#27727B',
	                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
	                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0','#C1232B'
	                            ];
	                            return colorList[params.dataIndex]
	                        },
	                        label: {
	                            show: true,
	                            position: 'top',
	                            formatter: '{b}\n{c}'
	                        }
	                    }
	                },
	                data: []
	            }]
	        });
	        $.ajax({
				url : "${ctx}/wechat/favjob/getdataecharts",
				type : "post",
				data :{
					dept:"${loginUser.dept}"
				},
				async : false,
				success : function(data) {
					// 填入数据
				   var title = data.title + '岗位统计';
				    myChart.setOption({
				    	title: {
		                text: title
		           		 },
				        xAxis: {
				            data: data.category
				        },
				        series: [{
				            // 根据名字对应到相应的系列
				            name: '销量',
				            data: data.data
				        }]
				    });
				}
			});
	        // 使用刚指定的配置项和数据显示图表。
		}
		deptEcharts();
	    clazzEcharts();   
	    </script>
	</body>

</html>